<template>
  <div class="expired">
    <div>
      <div class="card_edit">
        <span class="left">即将过期的电子券</span>
        <a href="javascript:;" class="right" @click="$router.push({path:'/cardList'})">我的商券<i
            class="iconfont icon-right"></i></a>
      </div>
      <div v-infinite-scroll="moreList"
           infinite-scroll-disabled="loading"
           infinite-scroll-immediate-check="true"
           infinite-scroll-distance="100">
        <div v-for="item in expiredList" class="exchange_card" v-if="getDayTime(item.validatyEnd) >=0 ">
          <div :class="item.couponNum<=1?'cardBg1 bgc_tp':'cardBg1'">
            <div class="bgLine">
              <img v-if="item.couponNum<=1" src="../../images/cardBg_05.png">
              <img v-if="item.couponNum>1" src="../../images/cardBg.png">
            </div>
            <a @click="jumpDetail(item)" class="cardBg2">
              <div v-if="getDayTime(item.validatyEnd) < 0" class="card_tit card_gray">
                <span class="right expired-tit">该电子券已过期</span>
                <p>{{item.mchtName}}</p>
              </div>
              <div v-if="getDayTime(item.validatyEnd) == 0" class="card_tit card_expired">
                <span class="right expired-tit">今日过期</span>
                <p>{{item.mchtName}}</p>
              </div>
              <div v-if="getDayTime(item.validatyEnd) < 7 && getDayTime(item.validatyEnd) > 0"
                   class="card_tit card_expired">
                <span class="right expired-tit">{{ item.validatyEnd | get-day-time}}天后过期</span>
                <p>{{item.mchtName}}</p>
              </div>
              <div class="couponDiv"
                   :class="{'coupon_yellow':item.type=='cash','coupon_green':item.type=='rebate','coupon_blue':item.type=='voucher','coupon_orange':item.type=='present','coupon_purple':item.type=='ticket'}">
                <div class="_num"
                     :class="{'coupon_color_y':item.type=='cash','coupon_color_g':item.type=='rebate','coupon_color_b':item.type=='voucher','coupon_color_o':item.type=='present','coupon_color_p':item.type=='ticket'}">
                  Coupon
                </div>
                <div class="_num_price">
                  <coupon-num :num="item.denomination" :type="item.type"></coupon-num>
                </div>
                <div class="coupon_type">{{item.type | couponTp}}</div>
              </div>
              <div class="card_info">
                <div class="card_name">{{item.name}}</div>
                <div class="coupon_info_item">
                  <star :couponComScore="item.comScore"></star>
                  <p class="info_pad">{{item.comNum}}条 <span>{{item.type | couponTp}}</span><span
                      class="color-red">{{item.couponNum}}</span>张</p>
                </div>

                <div class="coupon_info_item color_gray">
                  已售出   {{item.soldnum}}  &nbsp;&nbsp;&nbsp;已使用   {{item.usednum}}
                </div>
              </div>
            </a>
            <!-- <a class="card_btn" @click="upDown(0)"> -->
            <a class="card_btn" @click="jumpDetail(item)">
              <div class="used_card_detail whiteBg">
                <div class="coupon_dtl_tit">使用须知<i
                    :class="useStatus.indexOf(0)>=0?'iconfont icon-iconfontunfold right':'iconfont icon-right right'"></i>
                </div>
                <div class="coupon_dtl_instr" v-if="useStatus.indexOf(0)>=0">
                  <ul>
                    <li><span>酒水、纸巾不可用</span></li>
                    <li><span>有效期2017.3.1至2017.8.1</span></li>
                    <li><span>限晚市使用，周末、法定节假日不可以使用</span></li>
                  </ul>
                </div>
                <div class="coupon_dtl_instr2" v-if="useStatus.indexOf(0)>=0">
                  <ul>
                    <li><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用</li>
                    <li><i class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他电子券同时使用</li>
                    <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                  </ul>
                </div>
              </div>
            </a>

          </div>
        </div>
        <!-- 				<div :class="useStatus.indexOf(1)>=0?'exchange_card exchange_card_hg':'exchange_card'">
                  <div class="cardBg1 card_single">
                            <div class="bgLine"><img src="../../images/cardBg_05.png" /></div>
                            <a @click="jumpDetail()" class="cardBg2">
                                <div class="card_tit card_expired">
                                    <span class="expired-tit">2天后过期</span>
                                </div>
                                <div class="card_img"><img src="../../images/commont_coupon.png"></div>
                                <div class="card_info">
                                    <div class="card_name">多伦多自助餐厅58元抵用券（满188使用）</div>
                                    <div class="coupon_info_item">
                                        <p class="star_con">
                                            <i class="icon iconfont icon-star"></i>
                                            <i class="icon iconfont icon-star"></i>
                                            <i class="icon iconfont icon-star"></i>
                                            <i class="icon iconfont icon-star"></i>
                                            <i class="icon iconfont icon-star1"></i>
                                        </p>
                                        <p class="info_pad">1236条 &nbsp;&nbsp;抵用券<span class="color-red">1</span>张</p>
                                    </div>

                                    <div class="coupon_info_item color_gray">
                                        已售出   0   &nbsp;&nbsp;&nbsp;已使用   0
                                    </div>
                                    <a class="ewm_show"><img src="../../images/erweima_img_01.png"></a>
                                </div>
                            </a>
                            <a class="card_btn" @click="jumpDetail()">
                      <div class="used_card_detail whiteBg">
                          <div class="coupon_dtl_tit">使用须知<i :class="this.useStatus.indexOf(1)>=0?'iconfont icon-iconfontunfold right':'iconfont icon-right right'"></i></div>
                            <div class="coupon_dtl_instr" v-if="this.useStatus.indexOf(1)>=0">
                                <ul>
                                    <li><span>酒水、纸巾不可用</span></li>
                                    <li><span>有效期2017.3.1至2017.8.1</span></li>
                                    <li><span>限晚市使用，周末、法定节假日不可以使用</span></li>
                                </ul>
                            </div>
                            <div class="coupon_dtl_instr2" v-if="this.useStatus.indexOf(1)>=0">
                                <ul>
                                    <li><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用</li>
                                    <li><i class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他电子券同时使用</li>
                                    <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                                </ul>
                              </div>
                        </div>
                    </a>
                        </div>
                </div> -->
      </div>

      <div class="loading-box" v-if="moreInfo">
        <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreFind"></list-loading>
      </div>
      <div class="lastInfoMore" v-if="!moreInfo" v-show="expiredList.length>expiredPageLimit">没有更多</div>
    </div>
  </div>
</template>
<script>
  import star from '../../componentes/global/star.vue'
  import couponNum from '../../componentes/global/couponNum.vue'
  import getData2 from '../../service/getData2.js'
  import * as types from '../../vuex/types.js'
  import * as types1 from '../../vuex/appendType'
  import {mapState} from 'vuex'
  import {Toast, Indicator} from 'mint-ui'
  import listLoading from '../../componentes/global/listLoading.vue'

  export default {
    components: {
      listLoading,
      star,
      couponNum
    },
    data() {
      return {
        useStatus: [],
        loading: true,
        noMoreFind: true,
        moreInfo: true
      }
    },
    created: function () {
      this.$emit('header-info', {
        title: '过期提醒',
        isBack: true,
        isMessage: false
      })
      this.$store.commit(types1.EXPIRED);
      this.$store.commit(types1.EXPIRED_PAGE, 1);
      this.$store.commit(types.GET_SCORLL_STATUS, true);
      this.clickMoreList();
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        expiredList: state => state.info.expiredList,
        expiredPageLimit: state => state.info.expiredPageLimit
      })
    },
    methods: {
      //使用须知
      upDown: function (index) {
        var a = this.useStatus.indexOf(index);
        if (a == -1) {
          this.useStatus.push(index);
        } else {
          this.useStatus.splice(a, 1);
        }
        // if(this.useStatus==i){
        // 	this.useStatus=null;
        // }else{
        // 	this.useStatus=i;
        // }
      },
      // 跳转详情
      jumpDetail: function (item) {
        if (this.getDayTime(item.validatyEnd) < 0) {
          Toast({
            message: '该电子券已过期',
            duration: 800
          });
        } else {
          this.$router.push({"path": '/expiredDetail/' + item.mchtId + '/' + item.couponId + '/' + item.couponNum});
        }

      },
      // 列表
      clickMoreList: function () {
        if (!this.noMoreFind) {//防止重复点击
          return
        }
        let me = this;

        this.noMoreFind = false;
        this.$store.dispatch('expiredItem', {method: 'post', data: {"usrId": me.userInfo.usrId}}).then(function (rep) {
          //console.log(rep)
          if (rep.content.couponList) {
            if (rep.content.couponList.length < me.expiredPageLimit) {
              setTimeout(function () {
                me.noMoreFind = true;
              }, 300);
              me.moreInfo = false
            }
            if (rep.content.couponList.length == me.expiredPageLimit) {
              me.moreInfo = true;
              me.loading = false;
              me.noMoreFind = true;
            }
          } else {
            setTimeout(function () {
              me.noMoreFind = true;
            }, 300);
          }
        }).catch(function (rep) {
          setTimeout(function () {
            me.noMoreFind = true;
          }, 300);
        });
      },
      moreList: function () {
        this.loading = true;
        this.noMoreFind = true;
        this.clickMoreList();

      },
      getDayTime(value) { // 计算优惠券还有几天过期
        value = value.substring(0, 4) + '/' + value.substring(4, 6) + '/' + value.substring(6, 8);
        let day = new Date(value).format("Y/MM/dd 23:59:59");
        return Math.floor(((new Date(day).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)))
      }

    },
    filters: {
      getDayTime: value => {
        console.log(value)
        value = value.substring(0, 4) + '/' + value.substring(4, 6) + '/' + value.substring(6, 8);
        let day = new Date(value).format("Y/MM/dd 23:59:59");
        return Math.floor(((new Date(day).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)))
      }
    }
  }
</script>
<style scoped>
  .info_pad {
    line-height: 1.4rem
  }

  .expired .coupon_dtl_tit {
    text-align: left
  }

  .card_gray {
    text-align: center;
    color: #999;
    font-size: 1rem;
  }

  .exchange_card .bgLine {
    top: 8.3rem;
  }

  .coupon_dtl_tit {
    font-size: 0.85rem
  }

  .lastInfoMore {
    color: #fff;
  }

  .card_tit p {
    text-align: left
  }
</style>
